import { useState } from 'react'

function Message({
  message,
  onDismiss,
  className,
  style,
}: {
  message: string
  className?: string
  style?: React.CSSProperties
  onDismiss?: () => void
}) {
  const [verbose, setVerbose] = useState(false)
  return (
    message
    && (verbose
      ? (
        <div
          className={`absolute right-4 left-4 bottom-10 border rounded-sm bg-red-100 border-red-600 ${className}`}
          style={style}
        >
          <section className="relative text-red-600 text-xs">
            <pre className="px-4 py-2">{message}</pre>
            <button
              className="border-0 bg-transparent absolute top-1 right-4 w-4 h-4 rounded-full text-center text-xs text-red-600"
              onClick={() => onDismiss?.()}
            >
              ✕
            </button>
          </section>
        </div>
        )
      : (
        <div
          className={`text-xs absolute left-4 bottom-10 border p-1 rounded-sm bg-red-100 border-red-600 ${className}`}
          onClick={() => setVerbose(true)}
        >
          ✕
        </div>
        )
    )
  )
}

export { Message }
